<!--

    Copyright (c) 2010-2025 Eclipse Dirigible contributors

    All rights reserved. This program and the accompanying materials
    are made available under the terms of the Eclipse Public License v2.0
    which accompanies this distribution, and is available at
    http://www.eclipse.org/legal/epl-v20.html

    SPDX-FileCopyrightText: Eclipse Dirigible contributors
    SPDX-License-Identifier: EPL-2.0

-->
<!DOCTYPE html>
<html lang="en" ng-app="welcome" ng-controller="WelcomeController" xmlns="http://www.w3.org/1999/xhtml">

  <head>
    <meta charset="utf-8" />
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <link rel="icon" sizes="any" href="data:;base64,iVBORw0KGgo=">
    <title config-title></title>
    <script src="configs/welcome.js" type="text/javascript"></script>
    <script type="text/javascript" src="/services/js/platform-core/services/loader.js?id=editor-js"></script>
    <script type="text/javascript" src="/services/web/service-template/templates.js"></script>
    <link type="text/css" rel="stylesheet" href="/services/js/platform-core/services/loader.js?id=view-css" />
    <script src="js/welcome.js" type="text/javascript"></script>
    <style>
      .imgColor path {
        background-color: var(--fdAvatarBackgroundColor);
        fill: var(--fdAvatarColor);
      }

    </style>
  </head>

  <body bk-scrollbar>
    <section class="fd-section bk-full-height bk-padding-top--md" style="background-color: transparent">
      <div class="fd-section__header">
        <h3 class="fd-section__title">Welcome to Eclipse Dirigible™</h3>
      </div>
      <p class="fd-text">
        <bk-link href="http://www.dirigible.io" target="_blank">Eclipse Dirigible™</bk-link> is a Cloud Development Platform providing development tools and runtime environment. It supports full development life-cycle of on-demand
        applications by leveraging in-system programming models and rapid application development techniques.
      </p>
      <br>
      <bk-panel fixed="true" expanded="true">
        <bk-toolbar type="transparent">
          <bk-toolbar-title>Create a new project</bk-toolbar-title>
          <bk-toolbar-spacer></bk-toolbar-spacer>
          <bk-input id="searchInput" style="max-width: 30%;" ng-change="search.applyFilter()" ng-model="search.text" placeholder="Search template by name" type="text"></bk-input>
        </bk-toolbar>
        <div class="fd-container">
          <div class="fd-row">
            <span ng-if="templates.length && !filteredTemplates.length">No templates found.</span>
            <div ng-if="templates.length" class="fd-col fd-col--12 fd-col-md--6 fd-col-lg--4 fd-col-xl--3" ng-repeat="template in filteredTemplates | startFrom:(currentPage-1)*pageSize | limitTo:pageSize">
              <bk-card card-type="object" aria-roledescription="Card" ng-click="openCreateProjectDialog(template)">
                <bk-card-header title="{{::template.name}}" subtitle="{{::template.description}}" interactive="true" description="Create project from template {{::template.name}}">
                  <bk-avatar ng-if="!template.glyph && !template.image" glyph="sap-icon--example" style="font-size:2rem" size="s" aria-label="project template icon"></bk-avatar>
                  <bk-avatar ng-if="template.glyph && !template.image" glyph="{{::template.glyph}}" style="font-size:2rem" size="s" aria-label="project template icon"></bk-avatar>
                  <bk-avatar ng-if="!template.glyph && template.image" size="s" aria-label="project template icon">
                    <span class="imgColor bk-fill-parent bk-center bk-icon--svg bk-icon--scale sap-icon" role="presentation" ng-include="::template.image"></span>
                  </bk-avatar>
                </bk-card-header>
              </bk-card>
            </div>
          </div>
        </div>
      </bk-panel>
      <bk-pagination current-page="currentPage" display-total-items="true" items-per-page="pageSize" total-items="filteredTemplates.length"></bk-pagination>
      <p class="fd-text">You can model the database schema of your web application, create server-side scripting services by using the <bk-link href="http://www.dirigible.io/api" target="_blank">Enterprise Javascript API</bk-link>
        or just design your web pages in HTML5 by using your favorite client-side framework.
        <br>
        All source code is licensed under the <bk-link href="https://www.eclipse.org/legal/epl-v20.html" target="_blank">Eclipse Public License 2.0</bk-link> and maintained at <bk-link href="https://github.com/eclipse/dirigible"
          target="_blank">GitHub</bk-link>.
      </p>
    </section>
    <theme></theme>
  </body>

</html>
